<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <style>
        /* 基本样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
        }

        .user-item {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        .user-item img {
            border-radius: 50%;
            object-fit: cover;
        }

        .user-item a {
            color: #007bff;
            text-decoration: none;
        }

        .user-item a:hover {
            text-decoration: underline;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            .user-item {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>用户列表</h1>

    {% for i in users %}
        <div class="user-item">
            <span>{{ i.username }}</span>
            <img src="/media/{{i.myfile}}" width="100" height="100"/>
            <!--如果是本用户，则显示更改头像链接-->
                <a href="/user/update">更改头像</a>


        </div>
    {% empty %}
        <p>没有任何信息</p>
    {% endfor %}
</div>
</body>
</html>
